var ul = document.querySelector("ul"),
	left_arrow = document.querySelector(".left_arrow"),
	right_arrow = document.querySelector(".right_arrow"),
	point_list = document.querySelectorAll("ol li"),
	now_index = 0;
	

//右箭头事件
	right_arrow.addEventListener("click",function(){
		point_list[now_index].classList.remove("active")
		
		if(++now_index==point_list.length){
			now_index=0;
		}
		ul.style.transform =`translate(-${now_index}00%)`; 
		point_list[now_index].classList.add("active")
		
	})
	
//左箭头事件	
	left_arrow.addEventListener("click",function(){
		point_list[now_index].classList.remove("active")
		
		if(--now_index == -1){
			now_index = point_list.length - 1;
		}
		ul.style.transform = `translateX(-${now_index}00%)`
		
		point_list[now_index].classList.add("active")
	})
	
//自动轮播时间	
	function run(){
		tianrun = setInterval(function(){
		point_list[now_index].classList.remove("active")
		
		if(++now_index==point_list.length){
			now_index=0;
		}
		ul.style.transform =`translate(-${now_index}00%)`; 
		point_list[now_index].classList.add("active")
		
	},2000)
	}
	run();
	
	
	ul.addEventListener("mouseover",function(){
		clearInterval(tianrun);
	})
	
	ul.addEventListener("mouseout",function(){
		run();
	})
	
	
	
//点击按钮跳转事件	
	point_list.forEach(function(obj,index){
		obj.onclick = function(){
			point_list[0].classList.remove("active");
			point_list[1].classList.remove("active");
			point_list[2].classList.remove("active");
			point_list[3].classList.remove("active");
			ul.style.transform =`translate(-${index}00%)`; 
			now_index = index;
			point_list[index].classList.add("active")
		}
	})
	
	
	// 1.小圆点的激活类要对应上
	// 2.自动轮播(2s轮播一次)
	
	// 3.鼠标移入时,停止轮播,移出时回复自动轮播
	// 4.点击小圆点,直接到对应图片